<template>
	<view class="global">
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="80" align="center">名称</uni-th>
					<uni-th width="60" align="center">图片</uni-th>
					<uni-th width="40" align="center">容量</uni-th>
					<uni-th width="20" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.name }}</uni-td>
					<uni-td>
						<image style="width: 100px; height: 50px; border-radius: 10%;" :src="item.image" />
					</uni-td>
					<uni-td align="center">{{ item.capacity }}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button @click="toMeetRoomDetails(item.id)" size="mini" type="primary">详情</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
					:total="total" @change="change" /></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		getData
	} from '@/api/room.js'
	import {
		share
	} from '@/utils/share.js';
	onLoad(() => {
		share();
		getTableData();
	});


	const searchVal = ref('');
	// 每页数据量
	const pageSize = ref(10);
	// 当前页
	const pageCurrent = ref(1);
	// 数据总量
	const total = ref(0);
	const loading = ref(false);
	const tableData = ref([]);

	function getTableData() {
		getData(pageCurrent.value, pageSize.value).then(res => {
			if (res.code === 200) {
				tableData.value = res.data.data;
				total.value = res.data.total;
			}
		});
	};

	//下拉刷新请求数据
	onPullDownRefresh(() => {
		getTableData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	//去会议室详情页
	function toMeetRoomDetails(id) {
		uni.navigateTo({
			url: '/pages/meetRoomDetail/meetRoomDetail?id=' + id
		})
	};
</script>

<style scoped lang="scss">
	.uni-group {
		display: flex;
		align-items: center;
	}

	.global {
		background-color: #F5F5F5;
		height: auto;
	}
</style>